<template>
  <div>
    <soltTitle />
    <van-form @submit="onSubmit">
      <!-- 输入任意文本 -->
      <van-field
        required
        label="客户名称"
        @click="SeleCust"
        is-link
        arrow-direction="down"
        v-model="custName"
      />
      <van-field required v-model="visitTitle" is-link label="拜访标题" />
      <van-field
        readonly
        clickable
        required
        label="拜访原因"
        :value="visitReason"
        placeholder
        is-link
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        required
        name="datetimePicker"
        :value="tims"
        label="时间选择"
        title="&ensp;"
        placeholder
        @click="showdatetime = true"
      />
      <van-popup v-model="showdatetime" position="bottom">
        <van-datetime-picker
          @cancel="showdatetime = false"
          @confirm="onshowdatetime"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
        />
      </van-popup>
      <van-field
        class="BigInput"
        v-model="visitAddress"
        rows="3"
        required
        autosize
        label="拜访地址"
        type="textarea"
        placeholder="请输入"
        show-word-limit
      />
      <van-field
        class="BigInput"
        v-model="visitSituation"
        rows="3"
        autosize
        label="拜访情况"
        required
        type="textarea"
        placeholder="请输入"
        show-word-limit
      />
      <van-field
        class="BigInput"
        v-model="collectSituation"
        rows="3"
        required
        autosize
        label="竞争信息收集情况"
        type="textarea"
        placeholder="请输入"
        show-word-limit
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { VisitaddAPI } from "../../request/api";
import soltTitle from "../../components/soltTitle";

export default {
  data() {
    return {
      custId: "", // 用户ID
      custName: "", // 用户姓名
      visitTime: {}, // 拜访时间
      visitTitle: "", // 拜访标题
      visitReason: "", // 拜访原因
      visitAddress: "", // 拜访地址
      visitSituation: "", // 拜访情况
      collectSituation: "", // 竞争信息收集
      username: "",
      password: "",
      showPicker: false,
      showdatetime: false,
      columns: ["例行走访", "售中支撑", "售前支撑"],
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      tims: ""
    };
  },
  methods: {
    onSubmit(values) {
      VisitaddAPI({
        custId: this.custId,
        custName: this.custName,
        visitTime: `${this.visitTime.yearr}-${this.visitTime.month}-${this.visitTime.date} ${this.visitTime.hours}:${this.visitTime.minutes}:${this.visitTime.seconds}`,
        visitAddress: this.visitAddress,
        visitTitle: this.visitTitle,
        visitReason: this.visitReason,
        visitSituation: this.visitSituation,
        collectSituation: this.collectSituation
      }).then(res => {
        if (res.errCode == 0) {
          this.$router.push('/visitrecord')
        }
      });
    },
    onConfirm(value) {
      this.visitReason = value;
      this.showPicker = false;
    },
    // 获取时间
    onshowdatetime(date) {
      let newDate = new Date();
      this.visitTime = {
        yearr: date.getFullYear(), // 输入的年
        month:
          date.getMonth() + 1 < 10
            ? 0 + "" + (date.getMonth() + 1)
            : date.getMonth() + 1, // 输入的月
        date: date.getDate() < 10 ? 0 + "" + date.getDate() : date.getDate(), // 输入的日
        hours:
          newDate.getHours() < 10
            ? 0 + "" + newDate.getHours()
            : newDate.getHours(), // 当前的时
        minutes:
          newDate.getMinutes() < 10
            ? 0 + "" + newDate.getMinutes()
            : newDate.getMinutes(), // 当前的分
        seconds:
          newDate.getSeconds() < 10
            ? 0 + "" + newDate.getSeconds()
            : newDate.getSeconds() // 当前的秒
      };
      this.tims = `${this.visitTime.yearr}年${this.visitTime.month}月${this.visitTime.date}日`;
      this.showdatetime = false;
      console.log();
    },
    SeleCust() {
      this.$router.push("/visitlist");
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      return val;
    },
    skipHome() {
      this.$router.push("/home");
    },
    retreat() {
      this.$router.back();
    }
  },
  created() {
    this.custId = this.$route.query.id || "";
    this.custName = this.$route.query.name || "";
    console.log(this.custName);
  },
  components: {
    soltTitle
  }
};
</script>

<style scoped>
.addvisit {
  text-align: center;
}
.van-cell__right-icon {
  color: #efefef;
}
.van-cell {
  margin: 10px 0;
}
.van-field {
  margin: 0%;
}
.navspan_r > .van-icon {
  font-size: 25px;
  margin: 12px 0;
}
.BigInput {
  margin: 10px 0;
}
</style>